<template>
	<view class="all" >
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="all_title">
			<view class="groups" @click="tos()">
				<u-icon name="arrow-left" :bold="true" color="rgba(46, 46, 46, .5)" size="20"></u-icon>
				<view class="mod">书籍详情</view>
			</view>
			<u-icon name="home" color="rgba(46, 46, 46, .5)" @click="mesg()" size="28"></u-icon>
		</view>
		<view class="content">
			<image :src="content.coverUrl" mode="">
			</image>
			<view class="content-right">
				<u--text size=16 color="#2e2e2e" :bold="true" :text="content.title"></u--text>
				<u--text size=13 color="rgba(46, 46, 46, .5)" :text="'作者：'+content.authorName"></u--text>
				<view class="dns" style="display: flex;">
					<u--text size=13 color="rgba(46, 46, 46, .5)" :text="content.categoryName"></u--text>
					<u--text size=13 color="rgba(46, 46, 46, .5)" :text="content.subCategoryName==undefined?'/' + '无内容': '/' + content.subCategoryName"></u--text>
				</view>
				<u--text size=13 color="rgba(46, 46, 46, .5)" :text="content.latestChapter"></u--text>
				<u--text size=13 color="rgba(46, 46, 46, .5)" :text="content.allWords | words"></u--text>
			</view>
		</view>
		<u-button color="#ffbb1b" style="width: 690rpx;height: 80rpx;color: #000;font-size: 32rpx;" @click="demo()"
			:text=" txt == true ? '立即阅读' : '继续阅读' ">
		</u-button>
		<view class="directory">
			<view class="tody" @click="check(content.sourceId)">
				<view class="title_t">查看目录</view>
				<u--text size=14 color="rgba(46, 46, 46, .5)" text="更新于3小时前"></u--text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="line"></view>
		<view class="directory">
			<view class="tody">
				<view class="title_t">内容简介</view>
			</view>
			<rich-text :nodes="content.intro" class="txt"></rich-text>
		</view>
		<view class="line"></view>
		<view class="directory">
			<view class="tody">
				<view class="title_t">热门书评</view>
			</view>
			<view class="comments" v-for="(item,index) in review" :key="index">
				<view class="comments_l">
					<u-avatar style="margin-right: 20rpx;" size=20 :src="item.header" shape="circle"></u-avatar>
					<u--text size=13 color="rgba(161, 100, 0, .5)" :text="item.nickname+' 读过'"></u--text>
					<u-rate :count="count" v-model="item.score / 20"></u-rate>
				</view>
				<rich-text class="txt1" :nodes="item.content"></rich-text>
				<view class="times">
					<u--text size=12 color="#787878" :text="item.createdOn | times"></u--text>
					<view class="praise">
						<u-icon name="thumb-up" size=16 color="#787878"></u-icon>
						<u--text size=12 color="#787878" :text="item.upCount"></u--text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 4,
				content: '',
				review: '',
				cupe: '',
				cupes: '',
				txt: true
			}
		},
		filters: {
			words(value) {
				return Math.floor(value / 10000) + "万字"
			},
			times(data) {
				const dt = new Date(data)
				const y = dt.getFullYear()
				const m = (dt.getMonth() + 1 + '').padStart(2, '0')
				const d = (dt.getDate() + '').padStart(2, '0')
				const hh = (dt.getHours() + '').padStart(2, '0')
				const mm = (dt.getMinutes() + '').padStart(2, '0')
				const ss = (dt.getSeconds() + '').padStart(2, '0')
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			}
		},
		methods: {
			tos() {
				uni.navigateBack({
					delta: 1
				})
			},
			mesg() {
				uni.navigateBack({
					url: '/pages/message/message'
				})
			},
			check(i) {
				uni.navigateTo({
					url: '/pages/layout/layout?sourceId=' + i
				})
			},
			demo() {
				var self = this
				uni.getStorage({
					key: 'sign' + self.cupes,
					success: function(res) {
						self.searchData = res.data
						uni.navigateTo({
							url: '/pages/write/write?sourceId=' + self.cupes + '&chapterId=' + self
								.searchData
						})
					},
					fail: (err) => {
						self.searchData = err.data
						uni.navigateTo({
							url: '/pages/write/write?sourceId=' + self.cupes + '&chapterId=' + ''
						})
					}
				})
			},
		},
		onLoad(options) {
			this.cupes = options.sourceId
			uni.$http.get("https://m.taoyuewenhua.com/ajax/book?sourceName=tf&sourceId=" + options.sourceId).then(res => {
				this.content = res.data.data
			}).catch(err => {
				console.log(err)
			})
			uni.$http.get("https://m.taoyuewenhua.com/ajax/top_comments?sourceName=tf&sourceId=" + options.sourceId).then(
				res => {
					this.review = res.data.data
				}).catch(err => {
				console.log(err)
			})
		},
		onShow() {
			var self=this
			uni.getStorage({
				key: 'sign' + self.cupes,
				success: function(res) {
					self.searchData = res.data
					if(self.searchData!=''){
						self.txt = false
					}else {
						self.txt = false
					}
				}
			})
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.all_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 80rpx;
		border-bottom: 2rpx solid #ededed;
		background-color: #fff;

		.groups {
			display: flex;
			align-items: flex-end;

			.mod {
				margin-left: 20rpx;
			}
		}
	}

	.content {
		display: flex;
		padding: 26rpx 30rpx;

		image {
			width: 174rpx;
			height: 249rpx;
			padding-right: 20rpx;
		}

		.content-right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 70%;

			.u-text {
				flex: none;
				width: auto;
			}
		}

	}

	.tody {
		height: 110rpx;
		margin: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title_t {
			font-size: 32rpx;
			font-weight: bolder;
			position: relative;
			margin: 0 14rpx 0 10rpx;

			&::before {
				content: "";
				width: 6rpx;
				height: 70%;
				position: absolute;
				left: -16rpx;
				top: 6rpx;
				background-color: #ffbb1b;
			}
		}

		.more {
			display: flex;
			color: #2e2e2e;
			opacity: .5;
			font-size: 28rpx;
		}
	}

	.line {
		height: 20rpx;
		background-color: #f4f2f2;
		width: 100%;
	}

	.txt ::v-deep div {
		padding: 0 15px;
		color: rgba(46, 46, 46, 0.5);
		font-size: 24rpx;
		white-space: pre-line;
		line-height: 50rpx;
		font-weight: bolder;
	}

	.txt1 ::v-deep div {
		padding: 0 15px;
		color: rgba(46, 46, 46, 0.5);
		font-size: 24rpx;
		white-space: pre-line;
		line-height: 50rpx;
		margin: 20rpx 0
	}

	.comments {
		padding: 30rpx 30rpx;

		.comments_l {
			display: flex;
			align-items: center;
		}

		.times {
			display: flex;
			align-items: center;

			.praise {
				display: flex;
				align-items: center;
			}
		}
	}
</style>
